<template>
  <div class="test-container">
    <h4>除了第一个 get0，其他都是 XHR 直接被拦截的，在浏览器的 网络 中看不到请求记录。</h4>
    <div>
      <el-button
        :key="a1"
        type="danger"
        icon="el-icon-document"
        @click="get0"
      >
        get0
      </el-button>

      <el-button
        :key="a2"
        type="primary"
        icon="el-icon-document"
        @click="get1"
      >
        get1
      </el-button>

      <el-button
        :key="a3"
        type="success"
        icon="el-icon-document"
        @click="get2"
      >
        get2
      </el-button>

      <el-button
        :key="a4"
        type="info"
        icon="el-icon-document"
        @click="get3"
      >
        get3
      </el-button>

      <el-button
        :key="a5"
        type="primary"
        icon="el-icon-document"
        @click="post1"
      >
        post1
      </el-button>

      <el-button
        :key="a6"
        type="warning"
        icon="el-icon-document"
        @click="post2"
      >
        post2
      </el-button>

      <el-button
        :key="a7"
        type="danger"
        icon="el-icon-document"
        @click="post3"
      >
        post3
      </el-button>
    </div>
  </div>
</template>

<script>
  console.error("src\\view\\test\\index.vue");
  export default {
    name: 'Test',
    data() {
      return {
        appName: ''
      }
    },
    methods: {
      get0() {
        this.$store.dispatch('test/get0')
          .then((res) => {
            console.log("src\\view\\layout\\index.vue test/get0 then res", res);
          })
          .catch((error) => {
            console.error("src\\view\\layout\\index.vue test/get0 catch error", error);
          });
      },
      get1() {
        this.$store.dispatch('test/get1')
          .then((res) => {
            console.log("src\\view\\layout\\index.vue test/get1 then res", res);
          })
          .catch((error) => {
            console.error("src\\view\\layout\\index.vue test/get1 catch error", error);
            console.error("src\\view\\layout\\index.vue test/get1 catch error", error.message);
          });
      },
      get2() {
        this.$store.dispatch('test/get2', 'get2')
          .then((res) => {
            console.log("src\\view\\layout\\index.vue test/get2 then res", res);
          })
          .catch((error) => {
            console.error("src\\view\\layout\\index.vue test/get2 catch error", error);
            console.error("src\\view\\layout\\index.vue test/get2 catch error", error.message);
          });
      },
      get3() {
        this.$store.dispatch('test/get3', {'get3': 'get333'})
          .then((res) => {
            console.log("src\\view\\layout\\index.vue test/get3 then res", res);
          })
          .catch((error) => {
            console.error("src\\view\\layout\\index.vue test/get3 catch error", error);
          });
      },

      post1() {
        this.$store.dispatch('test/post1')
          .then((res) => {
            console.log("src\\view\\layout\\index.vue test/post1 then res", res);
          })
          .catch((error) => {
            console.error("src\\view\\layout\\index.vue test/post1 catch error", error);
          });
      },
      post2() {
        this.$store.dispatch('test/post2', 'post2')
          .then((res) => {
            console.log("src\\view\\layout\\index.vue test/post2 then res", res);
          })
          .catch((error) => {
            console.error("src\\view\\layout\\index.vue test/post2 catch error", error);
          });
      },
      post3() {
        this.$store.dispatch('test/post3', {'post3': 'post333'})
          .then((res) => {
            console.log("src\\view\\layout\\index.vue test/post3 then res", res);
          })
          .catch((error) => {
            console.error("src\\view\\layout\\index.vue test/post3 catch error", error);
          });
      }
    },
  }
</script>

<style lang="scss" scoped>
.test-container {
}
</style>
